<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>表单处理</title>
  <script src="../vue.js"></script>
</head>
<body>
  <div id="app">
    <div>
      <input type="text" v-model="inputTextValue">
      {{inputTextValue}}
    </div>
    <div>
      <textarea cols="30" rows="10" v-model="textAreaValue"></textarea>
      {{textAreaValue}}
    </div>
    <div>
      <input type="checkbox" v-model="singleCheckboxValue" />
      {{singleCheckboxValue}}
    </div>
    <div>
      看电影：<input type="checkbox" v-model="hobbies" value="movie">
      读书：<input type="checkbox" v-model="hobbies" value="read">
      玩手机：<input type="checkbox" v-model="hobbies" value="game">
      {{hobbies}}
    </div>
    <div>
      性别：
      <input type="radio" value="male" v-model="gender"> 
      <input type="radio" value="female" v-model="gender">
      {{gender}}
    </div>
    <div>
      <select v-model="city">
        <option value="001">北京</option>
        <option value="002">上海</option>
        <option value="003">深圳</option>
      </select>
      {{city}}
    </div>
    <div>
      <select v-model="cities" multiple>
        <option value="001">北京</option>
        <option value="002">上海</option>
        <option value="003">深圳</option>
      </select>
      {{cities}}
    </div>
    <div>
      <input type="number" v-model.lazy="age">
      {{age}}
    </div>
    <div>
      <input type="text" v-model.number="temp" @input="handleInput">
    </div>
    <div>
      <input type="text" v-model.trim="title">
    </div>
  </div>
  <script>
    new Vue({
      el: '#app',

      data: {
        inputTextValue: '',
        textAreaValue: '',
        singleCheckboxValue: true,
        hobbies: [],
        gender: 'female',
        city: '001',
        cities: [],
        age: 100,
        temp: 36,
        title: 'abc'
      },

      methods: {
        handleInput(e) {
          console.log(this.temp)
        }
      },

      mounted() {
        console.log(this.title)
      },

      watch: {
        title(newValue) {
          console.log(newValue)
        }
      },
    })
  </script>
</body>
</html>